<!-- 添加试题-实验题 -->
<template>
    <div id="addFill">
        <!-- 编辑实验环境悬浮 -->
        <div @click="dialogEditExperimental = true" class="edit-experimental">编辑实验环境</div>
        <!-- 编辑实验环境弹出框 -->
        <el-dialog
        class="dialog-edit-experimental"
        title="添加实验环境配置"
        :visible.sync="dialogEditExperimental"
        width="60%">
            <el-form ref="editExperimental" :model="editExperimental" label-width="80px">
                <el-form-item label="类型：">
                    <el-radio v-model="editExperimental.radio" label="1">单节点</el-radio>
                    <el-radio v-model="editExperimental.radio" label="2">集群</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogCheckSubmit = false">保存</el-button>
                <br>
                <br>
            </span>
        </el-dialog>
        <!-- 查重设置弹出框 -->
        <el-dialog class="dialog-check" title="提示" :visible.sync="dialogCheck" width="30%">
            <p>
                <i class="el-icon-warning"></i>批量控制该考试所有学生的实验报告重复率检查比率
            </p>
            <p class="dialog-b">实验报告代码查重校验
                <el-switch v-model="dialogCheckSwitch"></el-switch>
            </p>
            <p>实验报告相似度高于
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in dialogCheckOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogCheckSubmit = false">保存</el-button>
                <br>
                <br>
            </span>
        </el-dialog>
        <div class="jx-content">
            <div class="answer-editor">
                <h2 class="jx-title">试题题目</h2>
                <mavonEditor ref="question"></mavonEditor>
            </div>
            <div class="answer-editor">
                <h2 class="jx-title">参考答案</h2>
                <el-input type="textarea" :rows="5"></el-input>
            </div>
            <div class="question-editor">
                <h2 class="jx-title">答案解析</h2>
                <mavonEditor ref="answer"></mavonEditor>
            </div>

            <div class="btn-group">
                <button @click="getHtml" class="button-style question-submit">保存</button>
            </div>
        </div>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    import $ from "jquery";
    export default {
        components: { mavonEditor },
        data() {
            return {
                judgeRadio: "1",
                value: "",
                questionRenders: "",
                //编辑实验环境弹出框
                dialogEditExperimental: false,
                //查重设置弹出框
                dialogCheck: false,
                editExperimental:{
                    radio:'1'
                },
                //查重设置开关
                dialogCheckSwitch: true,
                //查重设置option
                dialogCheckOption: [
                    {
                    value: "选项1",
                    label: "70"
                    },
                    {
                    value: "选项2",
                    label: "80"
                    },
                    {
                    value: "选项3",
                    label: "90"
                    }
                ],
                options: [
                    {
                    value: "选项1",
                    label: "黄金糕"
                    },
                    {
                    value: "选项2",
                    label: "双皮奶"
                    },
                    {
                    value: "选项3",
                    label: "蚵仔煎"
                    },
                    {
                    value: "选项4",
                    label: "龙须面"
                    },
                    {
                    value: "选项5",
                    label: "北京烤鸭"
                    }
                ]
            }
        },
        computed: {},
        watch: {},
        mounted() {
            this.init();
        },
        methods: {
            init() {},
            getRenders(ref, prop) {
                let renders = this.$refs[ref].renders;
                console.log(renders);
                prop = renders;
            },
            getHtml() {
                this.getRenders("question", this.questionRenders);
                let qr = this.questionRenders;
                let ar = this.judgeRadio;
                console.log(qr, ar);
            },
            //查重弹出关闭
            dialogCheckClose() {},
            //查重弹出确定
            dialogCheckSubmit() {},
            //编辑实验环境弹出关闭
            dialogEditExperimentalClose() {},
            //编辑实验环境弹出确定
            dialogEditExperimentalSubmit() {}
        }
    };
</script>

<style lang="scss">
    @import "./../../../styles/layout/color_variables";
    //编辑器设置z-index
    @for $i from 1 through 15 {
        //$item: nth($stars, $i);
        .question-choice {
            &:nth-child(#{$i}) {
                .v-note-wrapper.markdown-body {
                    position: relative;
                    z-index: 16-$i;
                }
            }
        }
    }

    body {
        background: $bg-gray;
        overflow-y: scroll;
    }
    #addFill {
        width: $width;
        margin: 20px auto;
        color: #727272;
        .edit-experimental {
            width: 220px;
            height: 130px;
            position: fixed;
            right: 50px;
            bottom: 290px;
            background: #4d5368;
            color: #fff;
            text-align: center;
            line-height: 130px;
            font-size: 14px;
            cursor: pointer;
        }
        .dialog-check {
            p {
                line-height: 60px;
                text-align: center;
                i {
                    color: $btn-blue;
                    font-size: 20px;
                    padding: 0 10px;
                }
            }
            .dialog-b {
                margin-left: -27px;
            }
            .el-dialog__footer {
                text-align: center;
            }
            .el-select .el-input__inner {
                width: 80px;
            }
        }
        .demo-form-inline {
            .button-style {
                margin-top: 4px;
            }
        }
        //保存提交
        .question-submit {
            margin-left: -111px;
        }
        //编辑器
        .v-note-wrapper {
            min-height: 150px;
        }
        .form-group {
        }
        .btn-group {
            text-align: center;
            margin-top: 40px;
        }
        .answer-editor {
            margin-bottom: 60px;
            .v-note-wrapper {
                min-height: 150px;
            }
        }
        .question-editor {
            .jx-title {
                display: flex;
                justify-content: space-between;
            }
        }
        .question-choice {
            display: flex;
            margin-bottom: 40px;
            .question-left {
                color: #727272;
                min-width: 30px;
            }
            .question-center {
                width: 100%;
            }
            .question-right {
                min-width: 140px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .question-del {
                    width: 20px;
                    height: 20px;
                    padding: 0;
                    font-size: 24px;
                    border-radius: 20px;
                    color: $title-gray;
                    border: 1px solid $title-gray;
                    text-align: center;
                    line-height: 6px;
                    cursor: pointer;
                    &:hover {
                        color: #1277eb;
                        border: 1px solid #1277eb;
                    }
                }
                .question-del.is-disabled {
                    &:hover {
                        color: #c0c4cc;
                        cursor: not-allowed;
                        background-image: none;
                        background-color: #fff;
                        border-color: #ebeef5;
                    }
                }
                .question-label {
                    .chose-del {
                        color: #727272;
                        margin-right: 10px;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
</style>
